<template>
	<view class="root">
		<view
			:style="{
				borderBottom: `1rpx solid #eee`,
				margin: `0 30rpx`,
				padding: `15rpx 0`,
			}"
		>
			<view v-for="(option, optionIndex) in options" :key="optionIndex" class="fs-28">
				<view
					v-if="Array.isArray(option.value) && option.value.length"
					:style="{ padding: `15rpx 0` }"
					class="fd-row ai-center"
				>
					<text class="color-999">{{ option.name }}: </text>
					<view class="f1 fd-rerow flex-wrap oh ml-10">
						<image
							v-for="(photo, photoIndex) in option.value"
							:key="photoIndex"
							:style="{ width: `112rpx`, height: `112rpx` }"
							:src="photo"
							@click="previewPhoto(option.value, photoIndex)"
							class="bgc-eee br-10 ml-10 mb-10"
							mode="aspectFill"
						/>
					</view>
				</view>
				<label v-else-if="option.value.length" :style="{ padding: `15rpx 0` }">
					<text class="color-999 fs-28">{{ option.name }}: </text>
					<text class="color-1b1b1b ml-30 f1 ellipsis text-right">
						{{ option.value }}
					</text>
				</label>
			</view>
		</view>
		<label class="jc-end lh-3 mr-30 ml-30 fs-28">
			<text class="color-666">支付总额：</text>
			<text class="color-f33">￥{{ Number(orderInfo.total_fee).toFixed(2) }}</text>
		</label>

		<button
			:plain="true"
			:style="{ margin: `200rpx 30rpx 44px` }"
			hover-class="tap-hover"
			class="bgc-3ec483 border-none br-10 color-fff br-10 fs-30 lh-3"
			@click="pay"
		>
			支付
		</button>
	</view>
</template>

<script lang="ts">
	import { sleep } from "@/libs/utils";
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class ConfirmOrder extends Vue {
		// component property

		options: AnyObject = [];
		orderInfo: AnyObject = {
			total_fee: 0,
		};

		onLoad({ order_id }: AnyObject) {
			this.$request.get("/order/info", { id: order_id }).then(({ data }) => {
				this.options = data.array;
				this.orderInfo = data.orderInfo;
			});
		}

		previewPhoto(urls: string[], current: any) {
			uni.previewImage({ urls, current });
		}
		async pay() {
			const { data } = await this.$request.get("/user/getinfo");

			if (!data.nickname) {
				wx.getUserProfile({
					desc: "登录",
					success: ({ userInfo }) => this.$request.post("/user/saveuser", userInfo),
				});

				return;
			}

			uni.requestPayment({
				provider: "wxpay",
				...this.orderInfo,
				success: async () => {
					await uni.showToast({ title: "支付成功！" });
					await sleep(1.5);
					uni.switchTab({ url: "/pages/tabs/Order" });
				},
				fail(err) {
					uni.showToast({ title: "支付失败", icon: "none" });
					console.log(err);
				},
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>